<template>
  <div>
    <pk-dialog title="批量邀约" @confirm="confirm" @onClose="onClose">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <el-form-item label="面试岗位:">
        {{ jobName }}
      </el-form-item>
      <el-form-item label="邀约人数:">
        {{ data.length }} 人
      </el-form-item>
      <el-form-item label="邀约方式:" prop="notification_type">
        <el-radio-group v-model="ruleForm.notification_type">
          <el-radio value="sms">短信通知</el-radio>
          <el-radio value="email">邮件通知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="使用签名:" prop="count">
        {{counterStore?.userInfo.organization?.company?.company_name}}
      </el-form-item>
      <el-form-item label="面试时长:" prop="countdown">
       <div class="flex-row align-items-center justify-center">
        <div>
          <el-radio-group v-model="ruleForm.countdown">
            <el-radio :value="10">10分钟</el-radio>
            <el-radio :value="20">20分钟</el-radio>
            <el-radio :value="30">30分钟</el-radio>
            <!-- <el-radio :value="50">50分钟</el-radio> -->
          </el-radio-group> 
        </div>
        <div class="ml-12 flex-row" style="height:26px">
          <el-tooltip class="item" effect="dark" content="不同面试时长扣减点数不同，具体以官方通知为准" placement="top">
            <div><el-icon size="16"><Warning /></el-icon></div>
          </el-tooltip>
        </div>
       </div>
      </el-form-item>
      <el-form-item label="面试有效期:" prop="delay_days">
        <div>
          <div>
            <el-select v-model="ruleForm.delay_days" placeholder="请选择面试有效期" style="width: 160px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div></div>
        </div>
      </el-form-item>
      <el-form-item label="剩余点数:" prop="count">
        <div class="">
          <div class="page-form-querytotal">
            <div class="bold red-color">{{counterStore.querytotal}}</div>
            <span>
              <el-tooltip class="item" effect="dark" content="成功邀约1人扣减1个点数" placement="top">
                <div><el-icon size="16"><Warning /></el-icon></div>
              </el-tooltip>
            </span>
          </div>
          <!-- <div class="f-12 gray-color" style="line-height: 24px">成功邀约1人扣减1个点数</div> -->
        </div> 
      </el-form-item>
      </el-form>
    </pk-dialog>
  </div>
</template>

<script setup>
 import { Warning } from '@element-plus/icons-vue'
import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
import { reactive, ref, defineProps, computed, defineEmits } from 'vue'
import { useSideStore } from '@/store/state'
import { candidateInvite } from '@/api/api'
const emits = defineEmits(['onClose', 'cancel', 'confirm'])
const counterStore = useSideStore()
const ruleFormRef = ref(null)
const props = defineProps({
  jobName: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: () => []
  },
  companyName: {
    type: String,
    default: ''
  }
})
const rules = reactive({
  notification_type: [
    {
      required: true,
      message: '请选择邀约方式',
      trigger: 'change',
    },
  ],
  delay_days: [
    {
      required: true,
      message: '面试有效期',
      trigger: 'change',
    },
  ],
  countdown: [
    {
      required: true,
      message: '面试时间没有选择',
      trigger: 'change',
    },
  ]
})
const pageTotal = computed(() => {
  return counterStore?.userInfo?.organization?.employee?.quota - counterStore?.userInfo?.organization?.employee?.usage
})
const ruleForm = reactive({
  candidate_ids: [],
  notification_type: null,
  delay_days: null,
  countdown: null
})
const options = ref([
  {
    label: '1天',
    value: 1
  },
  {
    label: '3天',
    value: 3
  },
  {
    label: '5天',
    value: 5
  },
  {
    label: '7天',
    value: 7
  }
])
const onClose = () => {
  emits('onClose')
}
const confirm = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      candidateInvite({
        candidate_ids: props.data.map(item => item.candidate_id),
        notification_type: ruleForm.notification_type,
        delay_days: ruleForm.delay_days,
        countdown: ruleForm.countdown
      }).then(res => {
        emits('confirm')
      })
      console.log('submit!', valid)
    } 
  })
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio{
  margin-right: 12px!important;
}
.page-form{
  &-querytotal{
    position: relative;
    span{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      right: -25px;
      margin-top:3px
    }
  }
}
</style>